
<script setup lang="ts">
import { Search, RefreshRight, Upload, Download, Close, Position, Plus } from '@element-plus/icons-vue'
import { onMounted, reactive, ref, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { fetchGetUserList } from '@/api/manage/person'
import { usePublicStoreHook } from "@/store/modules/public";
import { IFormInfo } from "./types"
import { fetchGetCollegeList, fetchGetMajorList, fetchGetGradeList } from "@/api/public/index";


const publicStore = usePublicStoreHook()


// 表单数据
let tableData = reactive([])

const ruleFormRef = ref<FormInstance>()
// 分页组件的值 ----------------------------------------------------------------开始

// 实际传递的条件
const listQuery = reactive<IFormInfo>({
  college: undefined,
  type: undefined,
  cardEnable: undefined,
  currentPage: 1,
  gender: undefined, // 性别
  stuCode: undefined, // 学号
  major: undefined, // 专业
  grade: undefined, // 年级
  name: undefined // 姓名
})
// 显示在界面上的查询条件
const showQuery = reactive<IFormInfo>({
  college: undefined,
  type: undefined,
  cardEnable: undefined,
  currentPage: 1,
  gender: undefined, // 性别
  stuCode: undefined, // 学号
  major: undefined, // 专业
  grade: undefined, // 年级
  name: undefined, // 姓名
})
// 列表总数
const total = ref<number>(0)

// 分页组件的值 ----------------------------------------------------------------结束

const rules = reactive<FormRules>({
  college: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  major: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  grade: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  classes: [
    {
      message: '请选择',
      trigger: 'change',
    },
  ],
  name: [
    {
      message: '请输入',
      trigger: 'change',
    },
  ],
  studentNumber: [
    {
      message: '请输入',
      trigger: 'change',
    },
  ]
})
/**
 * 查询
 */
const handleSearch = () => {
  getPageList()
}
/**
 * 重置验证规则
 */
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

onMounted(() => {
  getPageList()
})
const listLoading = ref(false)
// 获取列表
const getPageList = async () => {
  listLoading.value = true
  const res = await fetchGetUserList(listQuery)
  const { currentPage, data } = res.data
  listQuery.currentPage = showQuery.currentPage = currentPage
  total.value = res.data.total
  tableData = data
  listLoading.value = false
}

/**
 * 过滤角色
 */
const filterRole = (role: any) => {
  switch (role) {
    case 0:
      return '普通会员'
    case 1:
      return '会长/部长'
    case 2:
      return '管理员'
    case 3:
      return '超级管理员'
    default:
      return role
  }
}
/**
 * 过滤学院
 */
const filterCollege = (college: any) => {
  let collegeName = ''
  collegeOptions.forEach((item) => {
    if (item.id == college) {
      collegeName = item.name
    }
  })
  return collegeName
}
/**
 * 过滤专业
 */
const filterMajor = (major: any) => {
  let majorName = ''
  majorOptions.forEach((item) => {
    if (item.id == major) {
      majorName = item.name
    }
  })
  return majorName
}
/**
 * 过滤年级
 */
const filterGrade = (grade: any) => {
  let gradeName = ''
  gradeOptions.forEach((item) => {
    if (item.id == grade) {
      gradeName = item.name
    }
  })
  return gradeName
}
// 男女选择器数据
const genderOptions = [
  {
    value: 0,
    label: '男',
  },
  {
    value: 1,
    label: '女',
  },
]
// 学院选择数据
let collegeOptions = reactive([{
  id: 1,
  name: '计算机科学学院'
}])
// 专业数据
let allMajorOptions = reactive([{
  id: 1,
  name: '通信专业',
  collegeId: 0
}])
// 年级数据
let gradeOptions = reactive([{
  id: 1,
  name: '大学一年级'
}])
let majorOptions: { id: number; name: string; college_id: number; }[] = reactive([])
// const selectCollege = () => {
//   ruleForm.major = undefined;
//   majorOptions = []
//   allMajorOptions.map((item) => {
//     if (Number(item.collegeId) === Number(ruleForm.college)) {
//       majorOptions.push(item)
//     }
//   })
// }
onMounted(() => {
  fetchGetCollegeList().then((res: { data: { data: { id: number; name: string; }[]; }; }) => {
    if (res) {
      collegeOptions = res.data.data
    }
  })
  fetchGetMajorList().then((res: { data: { data: { id: number; name: string; college_id: number; }[]; }; }) => {
    if (res) {
      majorOptions = res.data.data
    }
  })
  fetchGetGradeList().then((res: { data: { data: { id: number; name: string; }[]; }; }) => {
    if (res) {
      gradeOptions = res.data.data
    }
  })
})
</script>

<template>
  <div class="form-container">
    <el-form ref="ruleFormRef" :model="listQuery" :rules="rules" class="search-content container demo-listQuery "
      size="default" status-icon>
      <div class="search-main">
        <div class="search-form">
          <el-form-item label="学院:">
            <el-select v-model="listQuery.college" class="m-2" placeholder="请选择学院" :key="collegeOptions.length" clearable>
              <el-option v-for="item in collegeOptions" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="专业:">
            <el-select v-model="listQuery.major" class="m-2" placeholder="请选择专业" clearable :key="majorOptions.length">
              <el-option v-for="item in majorOptions" :key="item.id + item.name" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="年级:">
            <el-select v-model="listQuery.grade" class="m-2" placeholder="请选择年级" :key="gradeOptions.length" clearable>
              <el-option v-for="item in gradeOptions" :key="item.id + item.name" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="性别：">
            <el-select v-model="listQuery.gender" class="m-2" placeholder="请选择性别" clearable>
              <el-option v-for="item in genderOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="姓名:" placeholder="请输入" clearable>
            <el-input v-model="listQuery.name" clearable />
          </el-form-item>
          <el-form-item label="学号:" placeholder="请输入" clearable>
            <el-input v-model="listQuery.stuCode" clearable />
          </el-form-item>
        </div>
        <div class="search-button">
          <el-form-item>
            <el-button type="primary" @click="handleSearch" :icon="Search" class="btn-green">
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm(ruleFormRef)" :icon="RefreshRight" class="btn-white">重置</el-button>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div class="main-content container">
      <!-- <div class="operate-box">
        <el-button type="primary" :icon="Upload">导入成员</el-button>
        <el-button type="success" :icon="Download">导出Excel</el-button>
        <el-button type="danger" :icon="Close">批量移出</el-button>
        <el-button type="info" :icon="Position">数据大屏</el-button>
      </div> -->
      <el-table :data="tableData" stripe style="min-height: 40rem" v-loading="listLoading">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="name" label="姓名" show-overflow-tooltip />
        <el-table-column prop="gender" label="性别" show-overflow-tooltip>
          <template #default="scope">
            <div>
              {{ scope.row.gender == 0 ? '男' : '女' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" show-overflow-tooltip />
        <el-table-column prop="stuCode" label="学号" sortable show-overflow-tooltip />
        <el-table-column prop="college" label="学院" show-overflow-tooltip>
          <template #default="scope">
            <div>
              {{ filterCollege(scope.row.college) || '--' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="major" label="专业" show-overflow-tooltip>
          <template #default="scope">
            <div>
              {{ filterMajor(scope.row.major) || '--' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="年级" show-overflow-tooltip>
          <template #default="scope">
            <div>
              {{ filterGrade(scope.row.grade) || '--' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="role" label="角色" show-overflow-tooltip>
          <template #default="scope">
            <div>
              {{ filterRole(scope.row.role) || '--' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="operate" label="操作" width="200">
          <template #default="scope">
            <div class="theme-success">
              <el-button type="primary" link class="btn-green">查看</el-button>
              <el-button type="danger" link>移出</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :total="total" v-model:page="listQuery.currentPage" v-model:limit="listQuery.pageSize"
        hide-on-single-page @pagination="getPageList" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.form-container {
  height: 100%;
  display: grid;
  grid-template-rows: 16rem auto;
  gap: 1rem;
  

  .search-content {
    background-color: #fff;
    display: grid;
    grid-template-rows: 1fr 4fr;
    padding: 1rem 1.5rem;
    border: 1px solid #eee;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);


    .search-title {
      font-size: 2rem;
    }

    .search-main {
      display: grid;
      grid-template-columns: auto 8rem;
      margin-top: 1.5rem;

      .search-form {
        display: flex;
        flex-wrap: wrap;
      }

      .search-button {
        display: grid;

        .el-button {
          width: 5em;
          height: 3rem;
          padding: 1rem 0;

          &:last-child {
            margin: 0 !important;
          }
        }
      }

      .el-form-item {
        line-height: 3rem;
        height: 3rem;
        margin-right: 5rem;
      }

      .el-input {
        width: 23.68rem !important;
      }
    }
  }

  .main-content {
    background-color: #fff;
    padding: 2rem;

    .operate-box {
      display: flex;
      align-items: center;
    }
  }

}
</style>